<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#box {
				width: 300px;
				height: 130px;
				margin: 0 auto;
			}
			#box ul {
				width: 300px;
				height: 30px;
			}
			#box ul li {
				width: 100px;
				height: 30px;
				float: left;
				background-color: #55585A;
				list-style: none;
			}
			div {
				width: 100px;
				height:100px;
				background-color: #55AA7F;
			}
			
		</style>
		
	</head>
	<body>
		<!-- js选项卡 -->
		<!-- 1.点击元素要找到对应的索引 2.让下面的内容和我们点击的效果一一对应-->
		<div id="box">
			<ul>
				<li class="active">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
			</ul>
			<div class="active">内容1</div>
			<div>内容2</div>
			<div>内容3</div>
		</div>
		
		<script>
			// 获取元素
			// document: 文档 getElementById: 通过id获取元素 getElementByTagName: 通过标签名获取元素
			var box = document.getElementById("box");
			var lis = box.getElementsByTagName("li");		// 标签li组成的集合, 是一个类数组
			var divs = box.getElementsByTagName("div");  	// div 组成的集合, 类数组
				
			// 让当前元素添加一个类名active, 对应的内容元素也添加类名active
			console.log(lis, divs)
			
			for(var i=0; i<lis.length; i++){
				// 每次遍历先把当前元素存起来
				var item = lis[i];	
				item.index = i;
				<!-- // onclick是一个事件, js的事件是异步 -->
				<!-- // 自己理解, 我们点击的时候, for循环已经跑完了, 就是最后一个值 3 -->
				// 
				item.onclick = function(){
					
					// this 鼠标点击的是哪个就可以获取哪个标签的索引
					// console.log(this.index)
					tab(this.index)
					
				}
			}
			
			function tab(index){
				for(var i=0; i<lis.length; i++){
					lis[i].className = ""
					divs[i].className = ""
				}
				// 根据索引值给当前点击的索引值添加类名
				lis[index].className = "active"
				divs[index].className = "active"
				
			}
		</script>
	</body>
</html>
